<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Supporting Material</title>
<link href="resources/css/bootstrap.min.css"
	rel="stylesheet">
<link href="resources/css/dataTables.bootstrap.css"
	rel="stylesheet">
<script type="text/javascript" src="resources/js/jquery.min.js"></script>
<script type="text/javascript"
	src="resources/js/bootstrap.min.js"></script>

<script src="resources/js/bootbox.js"></script>
<script type="text/javascript" language="javascript"
	src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/jquery-ui.js"></script>

	<link rel="stylesheet" type="text/css"
	href="resources/css/jquery-ui.min.css" />
<script type="text/javascript" language="javascript"
	src="resources/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
	src="resources/js/dataTables.bootstrap.js"></script>
<script type="text/javascript"
	src="resources/js/jquery.validate.min.js"></script>
	<script type="text/javascript"
	src="resources/js/validateOrganisationScripts.js"></script>
<script type="text/javascript"
	src="resources/js/lookupscripts.js"></script>
<style type="text/css">
body {
	padding-top: 70px;
}
tr:hover td {
	background: #c7d4dd !important;
}

</style>
<!-- 
-------------------------
--Begin Script for Supporting Material Tab
--@Author: TienNM
 -->
<script type="text/javascript">

$(function() {
    $('#chkActiveFilterSupp').click(function() {
        if (this.checked == true) {
            var table = $('#suppprtingMaterialTable').DataTable();
            table.columns(5).search('').draw();
        } else {
            var table = $('#suppprtingMaterialTable').DataTable();
            table.columns(5).search('Yes').draw();
        }
    });
});

function activeSuppMaterial(suppId) {
    var isActive = document.getElementById('supp' + suppId)
        .getElementsByTagName("td")[5].childNodes[0].nodeValue;
    if (isActive.trim() == 'No') {
        bootbox
            .confirm(
                "Do you want to make this Supporting Materials active?",
                function(result) {
                    if (result == true) {
                        $
                            .ajax({
                                url: "activeSupportingMaterial?suppId=" + suppId,
                                type: "GET",
                                success: function() {}

                            });
                        document.getElementById('supp' + suppId)
                            .getElementsByTagName("td")[5].childNodes[0].nodeValue = "Yes";
                    } else {

                    }
                });
    }
};

$(document).ready(function() {
    var table = $('#suppprtingMaterialTable').DataTable();
    table.columns(5).search('Yes').draw();
    $('#suppprtingMaterialTable tbody').on('click', 'tr', function() {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            table.$('tr.active').removeClass('active');
            $(this).addClass('active');
        }
    });
    $("#suppprtingMaterialTable tr td").css('cursor', 'pointer');

});
</script>
<style>
#actionSupp {
	margin-right: 10px;
	float: right;
}
</style>
<!-- 
---------------------------------
--Script for details form
--@Author: ThuanLT
 -->
<script type='text/javascript'>
function inActiveOrg(OrgId) {
    bootbox
        .confirm(
            "This Organization is already in use, do you want to make this in-active?",
            function(result) {
                if (result == true) {
                    $
                        .ajax({
                            url: "inActiveOrganisation?orgId=" +
                                OrgId,
                            type: "GET",
                            success: function() {
                                alert();
                            }
                        });
                } else {}
            });

}
</script>

<!-- 
---------------------------------
--Script for Directorate Tab
--@Author: MinhNT
 -->
<script type="text/javascript">

$(document).ready(function() {
		var table = $('#directorateTable').DataTable();
		table.columns(4).search('Yes').draw();
		$('#directorateTable tbody').on('click', 'tr', function() {
			if ($(this).hasClass('active')) {
				$(this).removeClass('active');
			} else {
				table.$('tr.active').removeClass('active');
				$(this).addClass('active');
			}
		});
		$("#directorateTable tr td").css('cursor', 'pointer');

});
	function checkIncludeActive() {
		if (document.getElementById("includeinactive").checked != true) {
			var table = $('#directorateTable').DataTable();
			table.column(4).search("Yes").draw();
		} else {
			var table = $('#directorateTable').DataTable();
			table.column(4).search("").draw();
		}
	}
	function onActive(directorateID) {
		var isActive = document.getElementById('directorate' + directorateID)
				.getElementsByTagName("td")[4].childNodes[0].nodeValue;

		if (isActive.trim() == 'No') {
			bootbox
					.confirm(
							"Do you want to make this Directorate active?",
							function(result) {
								if (result == true) {
									$
											.ajax({
												url : "activeDirectorate?directorateID="
														+ directorateID,
												type : "GET",
												success : function() {
												}

											});
									document.getElementById(
											'directorate' + directorateID)
											.getElementsByTagName("td")[4].childNodes[0].nodeValue = "Yes";
								} else {
								}
							});
		}
	}
</script>

</head>
<body>

	<%@ include file="header.jsp"%>
	<div class="container">
		<h2>Organisation Details</h2>
		<hr>
		<div class="tabbable"">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#panel-Detail-1" data-toggle="tab">Details</a></li>

				<li><a href="#panel-Detail-2" data-toggle="tab">Supporting
						Material</a></li>
				<li><a href="#panel-Detail-3" data-toggle="tab">BU/Directorates</a></li>
				<div style="float: right;">
					<button class="btn btn-primary btn-default"
						onclick="inActiveOrg('${organisation.orgID}','${organisation.isActive}');">In-active</button>
				</div>
			</ul>
			<div class="tab-content">

			<!-- 
			---------------------------------------
			Content of Tab-1: Organisation form 
			-->

				<div class="tab-pane active" id="panel-Detail-1">
					<form:form action="editOrganisation" method="post"
						commandName="organisation" class="form-horizontal">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<p></p>
								<div class="form-group">
									<label class="col-lg-4 control-label">Organisation
										Name*</label>
									<div class="col-lg-6">
										<form:input path="orgName" id="orgName" name="orgName"
											class="form-control" />
										<form:hidden path="orgID" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Organisation
										Description *</label>
									<div class="col-lg-6">
										<form:textarea path="orgShortDescription"
											class="form-control " />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Lead Contact</label>
									<div class="col-lg-4">
										<form:input path="contact.firstName" id="inputContactName"
											readonly="true" class="form-control" />
									</div>
									<a class="btn btn-primary btn-default" id="lookupcontact">
										<span class="glyphicon glyphicon-search"></span> Lookup
									</a>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 1 *</label>
									<div class="col-lg-6">
										<form:input path="addressLine1" type="text"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 2</label>
									<div class="col-lg-6">
										<form:input path="addressLine2" type="text"
											class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Address Line 3</label>
									<div class="col-lg-6">
										<form:input path="addressLine3" type="text"
											class="form-control" value="${organisation.addressLine3 }" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">PostCode *</label>
									<div class="col-lg-4">
										<form:input readonly="true" class="form-control"
											id="inputPostCode" path="address.postCode" />
									</div>

									<a class="btn btn-primary btn-default" id="lookupadress"> <span
										class="glyphicon glyphicon-search"></span> Lookup
									</a>

								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">City/Town</label>
									<div class="col-lg-6">
										<form:input readonly="true" class="form-control"
											id="inputTown" path="address.town.townName" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">County</label>
									<div class="col-lg-6">
										<form:input readonly="true" class="form-control"
											id="inputCounty" path="address.county.countyName" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">National/Country</label>
									<div class="col-lg-6">
										<form:input readonly="true" class="form-control"
											id="inputCountry" path="address.country.countryName" />
									</div>
								</div>
							</div>
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<p></p>
								<div class="form-group">
									<label class="col-lg-4 control-label">Preferred
										Organisation</label>
									<div class="col-lg-6">
										<form:checkbox path="preferredOrg"
											value="${organisation.preferredOrg}" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Type of Business
										*</label>
									<div class="col-lg-4">
										<form:input readonly="true" path="sic.typeOfBussiness"
											class="form-control" id="inputBusiness " />
									</div>

									<a class="btn btn-primary btn-default" id="lookupsic"> <span
										class="glyphicon glyphicon-search"></span> Lookup
									</a>


								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">SIC Code</label>
									<div class="col-lg-4">
										<form:input readonly="true" path="sic.sicCode"
											id="inputSICCode" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label for="inputPhone" class="col-lg-4 control-label">Phone
										*</label>
									<div class="col-lg-6">
										<form:input path="phoneNumber" class="form-control"
											name="inputPhone" id="inputPhone" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Fax</label>
									<div class="col-lg-6">
										<form:input path="fax" type="text" class="form-control" />
									</div>
								</div>
								<!-- 						<div class="form-group"> -->
								<!-- 							 <label class="col-lg-4 control-label">Email</label> -->
								<!-- 							<div class="col-lg-6"> -->
								<!-- 								<input type="text" class="form-control" id="" placeholder="" /> -->
								<!-- 							</div> -->
								<!-- 						</div> -->
								<div class="form-group">
									<label class="col-lg-4 control-label">WebAddress</label>
									<div class="col-lg-6">
										<form:input path="webAddress" type="text"
											class="form-control bfh-phone" name="inputWebAddress"
											id="inputWebAddress" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Charity Number</label>
									<div class="col-lg-6">
										<form:input path="charityNumber" type="text"
											class="form-control" id="inputcharityNumber" maxlength="5" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-lg-4 control-label">Company Number</label>
									<div class="col-lg-6">
										<form:input path="companyNumber" type="text"
											class="form-control" id="inputcompanyNumber" maxlength="5" />
									</div>
								</div>
								<div class="form-group hidden">
									<label class="col-lg-4 control-label">Adress ID</label>
									<div class="col-lg-6">
										<form:hidden path="address.addressID" id="inputaddressID" />
									</div>
								</div>
								<div class="form-group hide">
									<label class="col-lg-4 control-label">Contact ID</label>
									<div class="col-lg-6 ">
										<form:input path="contact.contactID" id="inputcontactID" />
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-2 col-md-offset-5">
								<input type="submit" class="btn btn-success btn-default"
									value="Save" /> <a class="btn btn-danger btn-default"
									href="listactiveorganisation">Back</a>
							</div>
						</div>
					</form:form>
				</div>

				<!-- 
				-------------------------------------------------
				Content of Tab-2: List Supporting Materials 
				-->
				<div class="tab-pane" id="panel-Detail-2">
					<div class="col-md-12 column">
						<div class="row clearfix">
							<div class="col-md-6 column">
								<h3>Current List of Supporting Materials</h3>
							</div>
							<div class="col-md-6 column">
								<div id="actionSupp" style="margin-top: 20px;">
									<input value="Create" type="button"
										class="btn btn-primary btn-default"
										onclick="location.href='addSupportingMaterial?orgId=${orgId}';" />
									<input id="chkActiveFilterSupp" type="checkbox" />Include
									In-active
								</div>
							</div>
						</div>
					</div>
					<hr>

					<div>
						<table id="suppprtingMaterialTable"
							class="table table-striped table-bordered" cellspacing="0"
							width="100%">
							<thead>
								<tr>
									<th>URL</th>
									<th>Description</th>
									<th>Type</th>
									<th>Added by</th>
									<th>Added date</th>
									<th>Is Active</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach var="supp" items="${listSuppMaterial}">
									<tr class="supp${supp.isActive}" style="cursor: pointer;"
										id="supp${supp.supportingMaterialID }"
										onclick="activeSuppMaterial('${supp.supportingMaterialID}')">

										<td class="url">
											<a href="editSupportingMaterial?suppId=${supp.supportingMaterialID }">
												${supp.URL}
											</a>
										</td>
										<td>${supp.description}</td>
										<td>${supp.type}</td>
										<td>${supp.user.account}</td>
										<td class="suppdate">${supp.addedDate}</td>
										<td>
											<c:choose>
												<c:when test="${supp.isActive}">Yes</c:when>
												<c:otherwise>No</c:otherwise>
											</c:choose>
										</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>

				<!-- 
				-------------------------------------------------
				Content of Tab-3: List Directorate 
				-->

				<div class="tab-pane" id="panel-Detail-3">
					<div class="col-md-12 column">
						<div class="row clearfix">
							<div class="col-md-6 column">
								<h3>List Directorate</h3>
							</div>
							
							<div class="col-md-6 column">
								<div id="actionSupp" style="margin-top: 20px;">
									<input type="button" value="Create"
										class="btn btn-success btn-default"
										onClick="location.href='addDirectorate?orgID=${organisation.orgID}'" />
									<input type="checkbox" id="includeinactive"
										onclick="checkIncludeActive()" /> &nbsp; Include In-active?
								</div>
							</div>
						</div>
					</div>

					<br /> <br />
					<div>
						<table id="directorateTable"
							class="table table-striped table-bordered" cellspacing="0"
							width="100%">
							<thead>
								<tr>
									<th width="130px">BU/Directorate Name</th>
									<th>Office Address Line 1</th>
									<th width="80px">Post Code</th>
									<th width="80px">Contact</th>
									<th width="80px" id="includeinactive">Is Active?</th>
								</tr>
							</thead>
							<tbody id="tbody">
								<c:forEach items="${listDirectorate}" var="directorate">
									<tr id="directorate${directorate.directorateID}"
										style="cursor: pointer;"
										onClick="onActive('${directorate.directorateID}');">
										<td class="dictorateName"><a
											href="amendDirectorate?directorateID=${directorate.directorateID}&orgID=${organisation.orgID}">${directorate.directorateName}</a>
										</td>
										<td>${directorate.addressLine1}</td>
										<td>${directorate.address.postCode}</td>
										<td>${directorate.contact.firstName}</td>
										<td><c:if test="${directorate.isActive == 'true'}">Yes</c:if>
											<c:if test="${directorate.isActive == 'false'}">No</c:if></td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
		var listdate = document.getElementsByClassName('suppdate');
		for (i = 0; i < listdate.length; i++) {
			var d = listdate[i].childNodes[0].nodeValue;
			listdate[i].childNodes[0].nodeValue = d.split(" ")[0];

		}
</script>
<%@ include file="footer.jsp"%>
<div id="modaladdress" style="display: none;"></div>
<div id="modalcontact" style="display: none;"></div>
<div id="modalsic" style="display: none;"></div>
</body>
</html>